<!DOCTYPE html>
<html>
<head>
  <script src="./processing.js"></script>
  <script src="./init.js"></script>
  <script type="text/javascript" src="loadxmldoc.js"></script>
<!--W3Schools and http://articles.sitepoint.com/article/server-side-xml-javascript for Javascript/XML refresher --> 
  <script type="text/javascript">
  xmlDoc=loadXMLDoc("amazonb.xml");
  </script>
<title>Cloud of Thoughts - Seeing how I think</title>
</head>
<body>

<script type="text/javascript">

var title = new Array();  //(xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue);
var date = new Array();   //(xmlDoc.getElementsByTagName("date")[0].childNodes[0].nodeValue);
var nam = new Array();   //(xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue);
var rating = new Array(); //(xmlDoc.getElementsByTagName("rating")[0].childNodes[0].nodeValue);
var tex = new Array();   //(xmlDoc.getElementsByTagName("text")[0].childNodes[0].nodeValue);
var k=xmlDoc.getElementsByTagName("title");
for (i = 0; i <= k.length; i++)
{
title[i]=(xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue);
date[i]=(xmlDoc.getElementsByTagName("date")[i].childNodes[0].nodeValue);
nam[i]=(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue);
rating[i]=(xmlDoc.getElementsByTagName("rating")[i].childNodes[0].nodeValue);
tex[i]=(xmlDoc.getElementsByTagName("text")[i].childNodes[0].nodeValue);
}

</script>


<!--Based on code from Keith Peters (www.bit-101.com): Bouncy Bubbles - 
http://processing.org/learning/topics/bouncybubbles.html 
- Multiple-object collision.-->
<script type="application/processing">

println("Click and drag clouds. Right Click on a Ball to get its info. Scroll up for comments. Close with the X to see all the Manipulations available.");

  int colorh = 255;
  int colorb = 255;
  int colors = 255;

var x=xmlDoc.getElementsByTagName("title");
int numBalls = x.length;
//int numBalls = 9;
int bgcolora = 75;
int value = 0;
int sel = 0;
int con = 0;
int pull = 0;
int fullStop = 0;
float spring = 0.25;
float gravity = 0.05;
Ball[] balls = new Ball[numBalls];
//Data[] datas = new Data[numBalls];
boolean dragging=false;

// If use drags mouse...
void mouseDragged(){  
  // Set drag switch to true
  dragging=true;
}
  
// If user releases mouse...
void mouseReleased(){
  // ..user is no-longer dragging
  dragging=false;
}



void setup() 
{
  size(800, 400);
  noStroke();
  smooth();
  for (int i = 0; i < numBalls; i++) {
    balls[i] = new Ball(random(width), random(height), random(20, 40), i, balls, rating[i]);
  }
}

void draw() 
{
  background(value, value/2, bgcolora);
  for (int i = 0; i < numBalls; i++) {
    float radi=balls[i].diameter-3;
	balls[i].collide();
    balls[i].move();
	if ((con==0) && (pull==0))
    balls[i].display();  
	else if ((con==1) && (pull==0))
	balls[i].filter();
	else if ((con==0) && (pull==1))
	balls[i].pulla();
	else
	balls[i].pullb();
       
	if( dist(balls[i].x,balls[i].y,mouseX,mouseY) < radi ){   
	   
      // If user has mouse down and is moving...
      if(dragging){
        // Move circle to circle position
		stroke(145);
        balls[i].x=mouseX;
        balls[i].y=mouseY;
      }
	}
  }
}

void mousePressed(){
if (mouseButton == RIGHT){
 for (int i = 0; i < numBalls; i++) {
     float radi=balls[i].diameter-5;
   if( dist(balls[i].x,balls[i].y,mouseX,mouseY) < radi )
    {
	sel=1;
	//println(i);
	println(tex[i]);
	println(title[i]);
    println(date[i]);
	println(nam[i]);
	println(rating[i]);
	//println(balls[i].rate);
	}else{
	sel=0;
	}
  } 
 } 
 //println(con);
}

//It struck me that I could make things randomly pretty... so I went and made the function for my own amusement.
void keyPressed() 
{
int ran = random(255);
if (key == 'r' || key == 'R') {
      if(value != ran) {
      value=ran;
	  bgcolora=ran/random(5);
	  colorh=value/2 + random(75);
	  colorb=random(255);
	  colors=random(255);
      } else {
       value = 0;
      }
  }

//I am so proud about this:
 if (key == 'c' || key == 'C'){
  if (con == 0)
  con+=1;
  else
  con-=1;
 }  
 
 if (key == 'f' || key == 'F'){
  if (fullStop == 0){
  fullStop+=1;
  spring = 0;
  gravity = 0;
  }
  else{
  fullStop-=1;
  spring = 0.25;
  gravity = 0.05;
  }
 }  
 
 if (key == 'p' || key == 'P'){
  if (pull == 0){
  pull+=1;
  spring = 0;
  gravity = 0;
  }
  else{
  pull-=1;
  spring = 0.25;
  gravity = 0.05;
  }
 }  
}

//
class Ball {
  float x, y;
  float diameter;
  float vx = 0;
  float vy = 0;
  int id;
  Ball[] others;
  float rate = 0;
 
  Ball(float xin, float yin, float din, int idin, Ball[] oin, float ratein) {
    x = xin;
    y = yin;
    diameter = din;
    id = idin;
    others = oin;
	rate = ratein;
  } 
  
//  
  void collide() {
    for (int i = id + 1; i < numBalls; i++) {
      float dx = others[i].x - x;
      float dy = others[i].y - y;
      float distance = sqrt(dx*dx + dy*dy);
      float minDist = others[i].diameter/2 + diameter/2;
      if (distance < minDist) { 
        float angle = atan2(dy, dx);
        float targetX = x + cos(angle) * minDist;
        float targetY = y + sin(angle) * minDist;
        float ax = (targetX - others[i].x) * spring;
        float ay = (targetY - others[i].y) * spring;
        vx -= ax;
        vy -= ay;
        others[i].vx += ax;
        others[i].vy += ay;
      }
    }   
  }

//
  void move() {
  if (fullStop==1){
	x = x;
	y = y;
	}else{
    vy += gravity;
    x += vx;
    y += vy;
    if (x + diameter/2 > width) {
      x = width - diameter/2;
      vx += -0.9; 
    }
    else if (x - diameter/2 < 0) {
      x = diameter/2;
      vx *= -0.9;
    }
    if (y + diameter/2 > height) {
      y = height - diameter/2;
      vy *= -0.9; 
    } 
    else if (y - diameter/2 < 0) {
      y = diameter/2;
      vy *= -0.9;
    }
	}
  }

//
  void display() {
	fill(colorh, colorb, colors);
	ellipse(x, y, diameter, diameter);
  }
  
  void filter() {
	if(rate==5.0){
	colorh=255;
	colorb=255;
	colors=255;
	} else if(rate==4.0){
	colorh=200;
	colorb=200;
	colors=200;
	} else if (rate == 3.0){
	colorh=150;
	colorb=150;
	colors=150;
	} else if (rate == 2.0){
	colorh=100;
	colorb=100;
	colors=100;
	} else{
	colorh=20;
	colorb=20;
	colors=20;
	}
	fill(colorh, colorb, colors);
	ellipse(x, y, diameter, diameter);
  }
  
  void pulla() {
	if(rate==5.0){
	x=random(0, 250);
	y=random(0, 400);
	} else if(rate==4.0){
	x=random(260, 400);
	y=random(80, 400);
	} else if (rate == 3.0){
	x=random(410, 500);
	y=random(130, 400);
	} else if (rate == 2.0){
	x=random(510, 600);
	y=random(210, 400);
	} else{
	x=random(610, 700);
	y=random(310, 400);
	}
	fill(colorh, colorb, colors);
	ellipse(x, y, diameter, diameter);
  }
  
  void pullb() {
	if(rate==5.0){
	x=random(0, 250);
	y=random(0, 400);
	colorh=255;
	colorb=255;
	colors=255;
	} else if(rate==4.0){
	x=random(260, 400);
	y=random(80, 400);
	colorh=200;
	colorb=200;
	colors=200;
	} else if (rate == 3.0){
	x=random(410, 500);
	y=random(130, 400);
	colorh=150;
	colorb=150;
	colors=150;
	} else if (rate == 2.0){
	x=random(510, 600);
	y=random(210, 400);
	colorh=100;
	colorb=100;
	colors=100;
	} else{
	colorh=20;
	colorb=20;
	colors=20;
	x=random(610, 700);
	y=random(310, 400);
	}
	fill(colorh, colorb, colors);
	ellipse(x, y, diameter, diameter);
  }
  
}
</script><canvas width="800" height="400"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>
 <h5>Manipulations</h5>
 <ul><li>Press r (or R) for randomized colorations. Hold down r for a seizure.</li>
 <li>Press c (or C) to lock the color based on ratings.</li>
 <li>Press p (or P) to pull them into a visual sort based on ratings.</li>
 <li>Press f (or F) to Full Stop (Pull may have to be cancelled out of, first).</li></ul>
 <p>Press any key again to undo its effect (except for randomized colorations).</p>
</body>
</html>
